<template>
  <div id="app" style="overflow: hidden">
    <!--   搜索 searchBar-->
    <div
        class="flex"
        style="
        justify-content: space-between;
        position: relative;
        align-items: center;
        flex-wrap: wrap;
      "
    >
      <div class="flex" style="margin-right: 20px">
        <div class="search">
          加盟商姓名：
          <el-input
              placeholder="请输入"
              style="width: 200px"
              size="small"
              prefix-icon="el-icon-search"
              v-model="params.userName"
          >
          </el-input>
        </div>

        <div class="search">
          加盟商电话：
          <el-input
              placeholder="请输入"
              style="width: 200px"
              size="small"
              prefix-icon="el-icon-search"
              v-model="params.phoneNum"
          >
          </el-input>
        </div>

        <div class="search">
          加盟商等级：
          <el-select
              v-model="params.grade"
              placeholder="请选择"
              size="small"
              clearable
          >
            <el-option
                v-for="item in areaList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search">品牌：
          <el-select size="small" v-model="params.brandPartyId" filterable>
            <el-option v-for="item in brandList" :value="item.id" :label="item.brandPartyName"
                       :key="item.id"></el-option>
          </el-select>
        </div>
        <div class="search">
          <el-button
              size="small"
              type="primary"
              @click="result"
              icon="el-icon-refresh-right"
          >重置
          </el-button>
        </div>

        <div class="search">
          <el-button
              size="small"
              icon="el-icon-search"
              type="primary"
              @click="getFranchiseeList"
          >查询
          </el-button>
        </div>
      </div>
    </div>

    <!-- 新增按钮 -->
    <!--    新增按钮 -->
    <div>
      <el-button
          type="primary"
          size="small"
          style="margin-bottom: 10px"
          icon="el-icon-plus"
          @click="addFranchisee"
          v-if="authorityList.includes(1901)"
      >新增
      </el-button>
    </div>
    <!--    tableBar-->
    <el-table
        :data="franchiseeList"
        :row-style="{ height: '20px' }"
        height="calc(100vh - 300px)"
        overflow="auto"
        border
        stripe
        :cell-style="{ textAlign: 'center' }"
        :header-cell-style="{
        backgroundColor: '#F3F6FD',
        color: '#333333',
        fontSize: '14px',
        textAlign: 'center',
      }"
    >
      <el-table-column label="序号" type="index" width="60"></el-table-column>
      <el-table-column
          prop="franchiseeName"
          label="加盟商姓名"
      ></el-table-column>
      <el-table-column prop="gender" label="性别"></el-table-column>
      <el-table-column
          prop="franchiseePhone"
          label="联系方式"
      ></el-table-column>
      <el-table-column prop="openNum" label="开店数量"></el-table-column>
      <el-table-column prop="createTime" label="录入时间"></el-table-column>
      <el-table-column prop="grade" label="等级">
        <template slot-scope="scope">
          <el-tag
              v-if="scope.row.grade === 'a' || scope.row.grade === 'A'"
              style="margin-right: 4px"
              size="mini"
              effect="dark"
          >{{ scope.row.grade }}
          </el-tag>
          <el-tag
              v-else
              :type="setTagType(scope.row.grade)"
              style="margin-right: 4px"
              size="mini"
              effect="dark"
          >{{ scope.row.grade }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="250">
        <template slot-scope="scope">
          <el-link
              style="color: #303e9d; margin-left: 10px"
              @click="editFranchisee(scope.row)"
              v-if="authorityList.includes(1902)"
          >编辑
          </el-link>
          <el-link
              style="color: #303e9d; margin-left: 10px"
              @click="deleteFranchisee(scope.row)"
              v-if="authorityList.includes(1903)"
          >删除
          </el-link>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div style="text-align: right; margin-top: 20px">
      <el-pagination
          align="center"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="params.pageNum"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="params.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount"
      >
      </el-pagination>
    </div>
    <AddFranchisee
        ref="addFranchisee"
        :dialogTitle="dialogTitle"
        :franchiseeForm="franchiseeForm"
        @refresh="result"
    ></AddFranchisee>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import dayjs from 'dayjs'
import AddFranchisee from './componentDialog/AddFranchisee.vue'

export default {
  name: 'franchisee',
  meta: {
    title: '加盟商管理',
    icon: 'el-icon-s-custom',
    authorityList: 1900,
    sort: 3,
  },
  components: {
    AddFranchisee,
  },
  data() {
    return {
      createTime: '',
      storeDialog: false,
      detailsDialog: false,
      dialogTitle: '',
      franchiseeList: [],
      areaList: [
        {
          value: 'S',
          label: 'S级',
        },
        {
          value: 'A',
          label: 'A级',
        },
        {
          value: 'B',
          label: 'B级',
        },
        {
          value: 'C',
          label: 'C级',
        },
      ],
      authorityList: [],
      brandList: [],
      totalCount: 0,
      storeDetails: {},
      franchiseeForm: {},
      params: {
        pageSize: 20,
        pageNum: 1,
        userName: '', //加盟商姓名
        phoneNum: '', //电话
        grade: '', //等级
        brandPartyId: "",
      },
    }
  },
  computed: {
    ...mapState(['userData']),
  },
  created() {
    this.getBrand()
    // this.getAreaList();
    const {authorityList = []} =
    this.$quinn.getStorage('userDatav3') || this.$store.state.userData || {}
    this.authorityList = authorityList
  },
  methods: {
    getBrand() {
      this.$api.storeGetBrandPartyList().then(res => {
        this.brandList = res
        this.params.brandPartyId = res[0].id
        this.getFranchiseeList()
      })
    },
    setTagType(val) {
      if (val && val === 'B') {
        return 'success'
      } else if (val && val === 'C') {
        return 'success'
      } else if (val && val === 'S') {
        return 'warning'
      }
    },
    result() {
      this.params.pageSize = 20
      this.params.pageNum = 1
      this.params.userName = ''
      this.params.phoneNum = ''
      this.params.grade = ''
      this.getFranchiseeList()
    },
    // /franchisee/getFranchiseeList
    getFranchiseeList() {
      this.$api.franchiseeGetFranchiseeList(this.params).then((res) => {
        this.franchiseeList = res.data || []
        this.totalCount = res.total || 0
      })
    },
    getAreaList() {
      // this.$api.assignGetAreaList().then(res => {
      //   this.areaList = res || [];
      // });
    },
    getDate(val) {
      if (val) {
        this.params.startTime = dayjs(val[0]).format('YYYY-MM-DD')
        this.params.endTime = dayjs(val[1]).format('YYYY-MM-DD')
      } else {
        this.params.startTime = ''
        this.params.endTime = ''
      }
    },
    handleSizeChange(val) {
      this.params.pageSize = val
      this.getFranchiseeList()
    },
    handleCurrentChange(val) {
      this.params.pageNum = val
      this.getFranchiseeList()
    },
    addFranchisee() {
      this.dialogTitle = '录入加盟商'
      this.$refs.addFranchisee.handleOpen()
    },
    editFranchisee(row) {
      this.dialogTitle = '编辑加盟商'
      this.$refs.addFranchisee.handleOpen(JSON.parse(JSON.stringify(row)))

      // this.franchiseeForm = JSON.parse(JSON.stringify(row))
      // console.log('this.franchiseeForm', this.franchiseeForm)
    },
    viewDetails(row) {
      this.storeDetails = row
      this.detailsDialog = true
    },
    deleteFranchisee(row) {
      console.log('row', row)
      this.$confirm('确定要删除此条加盟商信息吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
          .then(() => {
            // /franchisee/deleteFranchisee
            this.$api
                .franchiseeDeleteFranchisee({franchiseeId: row.franchiseeId})
                .then((res) => {
                  this.$message.success('删除成功')
                  this.getFranchiseeList()
                })
          })
          .catch(() => {
          })
    },
  },
}
</script>

<style scoped>
@import '../../assets/css/public.css';

/* /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #303e9d;
} */
.search {
  margin: 0 10px 10px 0;
  display: flex;
  align-items: center;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

/deep/ .el-form-item__error {
  left: 80px;
}

/* /deep/ .el-table .el-table__cell {
  padding: 0 !important;
  height: 45px !important;
}

/deep/ .el-table .el-table__body tr.el-table__row--striped td {
  background: #f3f6fd !important; 
} */
</style>
